/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect } from 'react';
import { Space, Button, Form, Row } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import ProForm from '@ant-design/pro-form';
import KbAddressSelect from '@/components/KbAddressSelect';
import KbPagination from '@/components/KbPagination';
import AddAreaPriceModal from './addAreaPriceModal';
import { useAreaPrice } from './_utils';
import styles from './index.less';

const Index = ({ show }: { show: boolean }) => {
  const { actionRef, proFormRef, paginationRef, columns, queryTable, hasMore, winSize, reload } =
    useAreaPrice();

  useEffect(() => {
    if (show) actionRef.current?.reload();
  }, [show]);

  return (
    <PageContainer className={styles.main}>
      <Space direction={winSize === 'xs' ? 'vertical' : 'horizontal'}>
        <ProForm
          formRef={proFormRef}
          layout='inline'
          onFinish={async () => {
            actionRef.current?.reload(true);
          }}
          submitter={{
            render: (form_props) => {
              return [
                <Button
                  type='primary'
                  key='submit'
                  onClick={() => {
                    paginationRef.current.setValues(1);
                    form_props.form?.submit?.();
                  }}
                >
                  查询
                </Button>,
                <Button
                  key='reset'
                  onClick={() => {
                    form_props.form?.resetFields();
                    paginationRef.current.setValues(1);
                    form_props.form?.submit?.();
                  }}
                >
                  重置
                </Button>,
                <AddAreaPriceModal key='add' onRefresh={reload} />,
              ];
            },
          }}
        >
          <Form.Item label='请选择区域' name='area' style={{ width: 350 }}>
            <KbAddressSelect level={2} multiple placeholder='请选择区域' />
          </Form.Item>
        </ProForm>
      </Space>
      <DragTable>
        <ProTable
          rowKey='id'
          actionRef={actionRef}
          request={queryTable}
          columns={columns}
          search={false}
          toolBarRender={false}
          pagination={false}
          scroll={{
            x: 1200,
          }}
        />
      </DragTable>
      <Row justify='end' style={{ padding: '10px 20px' }}>
        <KbPagination
          hasMore={hasMore}
          actionRef={paginationRef}
          tableRef={actionRef}
          pageSize={20}
        />
      </Row>
    </PageContainer>
  );
};

export default Index;
